import React ,{Component} from 'react'
import {
  Card,
  Button,
  Table,
  Modal,
  message
} from 'antd'
import {connect} from 'react-redux'
import AddForm from './add-form'
import AuthForm from './auth-form'
import {formateDate} from '../../utils/dateUtils'
import {PAGE_SIZE} from "../../utils/constants"
import {reqRoles,reqAddRole,reqUpdateRole } from '../../api'
//import memoryUtils from "../../utils/memoryUtils"
//import storageUtils from "../../utils/storageUtils"
import {logout} from '../../redux/actions'


// 先又角色  后有用户  用户下 有个 roleId  属于那个 角色
class Role extends Component{

  constructor (props) {
    super(props)
    this.auth = React.createRef()
  }

    state = {
      roles: [
        // {
        //   "menus": [
        //       "/role",
        //       "/charts/bar",
        //       "/home",
        //       "/charts/line",
        //       "/category",
        //       "/product",
        //       "/products"
        //   ],
        //   "_id": "5ca9eab0b49ef916541160d4",
        //   "name": "经理",
        //   "create_time": 1554639536419,
        //   "__v": 0,
        //   "auth_time": 1558506990798,
        //   "auth_name": "test008"
        // }
      ], // 所有角色的列表
      role: {}, // 选中的role
      isShowAdd: false, // 是否显示添加界面
      isShowAuth: false, // 是否显示设置权限界面
    }

    initColumn = () => {
      this.columns = [
        {
          title: '角色名称',
          dataIndex: 'name'
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
          render: (create_time) => formateDate(create_time)
        },
        {
          title: '授权时间',
          dataIndex: 'auth_time',
          //render: (auth_time) => formateDate(auth_time)
          render: formateDate
        },
        {
          title: '授权人',
          dataIndex: 'auth_name'
        },
      ]
    }
    // 设置角色权限 就是 修改某个角色可以看那些菜单  role是roles对象中某个元素(此元素是个对象)
    // 把这个元素(对象) 又存进state 中的 role 中 修改 state 中的role值 会影响 原对象roles 里面的那个对象 (浅拷贝)
    onRow = (role)=>{
      return {
        onClick:event=>{ // 点击行  选中的角色对象 里有一个菜单数组  这个菜单数组要作为后面设置角色权限弹框 默认选中那些菜单项
          console.log('row onClick()', role)
          this.setState({ role })
        }
      }
    }

    // 获取角色列表 
    getRoles = async () => {
      const result = await reqRoles()
      if (result.status===0) {
        const roles = result.data
        //console.log('role44444',result.data);
        this.setState({
          roles
        })
      }
    }

    //添加角色  reqAddRole
    addRole =()=>{
        // 进行表单验证, 只能通过了才向下处理
        this.form.validateFields(async (error, values) => {
          if(!error){
              // 隐藏确认框
              this.setState({
                isShowAdd: false
              })
              // 收集输入数据
              const {roleName} = values
              this.form.resetFields()
              // 添加请求
              const result = await reqAddRole(roleName)
              if (result.status===0) {
                 message.success('添加角色成功')
                 // this.getRoles()
                 // 新产生的角色
                 const role = result.data;
                 //  更新roles状态 不推荐这样写  在原有数据上新增一个元素 不建议直接操作原有数据 
                 //const roles = this.state.roles;
                 //roles.push(role)
                 // 推荐这样写  先产生一个新的数组 再新增
                 //const roles = [...this.state.roles,role];
                 //this.setState({ roles })
                 // 更好的写法  基于原有数据更新 this.setState(state=>({ }) )  推荐这样写   原始写法
                 // 新的数据 和原来数据 没有关系 this.setState({})   简洁写法
                 this.setState(state=>({
                    roles:[...state.roles,role]
                  }))
              }else{
                 message.success('添加角色失败')
              }
          }
        })
    }
    //更新角色
    updateRole = async ()=>{

      // 隐藏确认框
      this.setState({
        isShowAuth: false
      })
      const role = this.state.role;
      // 得到最新的 menus  从 子组件取  通过 ref 方式取 
      const mewMenus= this.auth.current.getMenus()
      role.menus= mewMenus;
      role.auth_time = Date.now()
      //role.auth_name = memoryUtils.user.username 
      role.auth_name = this.props.user.username 
      const res = await reqUpdateRole(role)
       // 请求更新
       if (res.status===0) {
          // this.getRoles()
          // 如果当前更新的是自己角色的权限 要强制退出
          //if(role._id===memoryUtils.user.role_id){
          if(role._id===this.props.user.role_id){  
            //memoryUtils.user = {}
            //storageUtils.removeUser()
            //this.props.history.replace('/login')
            this.props.logout()
            message.success('当前用户角色权限修改了,请重新登录')
          }else{
            message.success('设置角色权限成功')
            this.setState({
              roles: [...this.state.roles]
            })
          }
       }
    }

    componentWillMount () {
      this.initColumn()
    }
    componentDidMount () {
      this.getRoles()
    }

     render(){

      const {roles, role, isShowAdd, isShowAuth} = this.state

      const title = (
        <span>
          <Button type='primary' onClick={() => this.setState({isShowAdd: true})}>创建角色</Button> &nbsp;&nbsp;
          <Button type='primary' disabled={!role._id} onClick={() => this.setState({isShowAuth: true})}>设置角色权限</Button>
        </span>
      )

      return ( 
        <Card title={title}>
        <Table
          bordered
          rowKey='_id'
          dataSource={roles}
          columns={this.columns}
          pagination={{defaultPageSize: PAGE_SIZE}}
          rowSelection={{
            type: 'radio',
            selectedRowKeys: [role._id],
            onSelect: (role) => { // 选择某个radio时回调
              this.setState({   // 选中不同行 更改到选中的那个 role 对象 把新的role._id 给 selectedRowKeys
                role
              })
            }
          }}
          onRow={this.onRow}
      />
      <Modal
          title="添加角色"
          visible={isShowAdd}
          onOk={this.addRole}
          onCancel={() => {
            this.setState({isShowAdd: false})
            this.form.resetFields()
          }}
        >
          <AddForm setForm={(form) => this.form = form} />
        </Modal>
        <Modal
          title="设置角色权限"
          visible={isShowAuth}
          onOk={this.updateRole}
          onCancel={() => {
            this.setState({isShowAuth: false})
          }}
         >
          <AuthForm  ref={this.auth}   role={role}/>
         </Modal>
        </Card>
        )
    }
}


export default connect(
  state=>({user:state.user}),
  {logout}
)(Role)